{% extends "upload/layer_upload_base.html" %}
{% load i18n %}
{% load staticfiles %}
{% load layer_tags %}

{% block body_class %}data data-list upload{% endblock %}

{% block title %} {% trans "Upload Layer Step: Time" %} - {{ block.super }} {% endblock %}

{% block head %}
{{ block.super }}
{% endblock %}

{% block body %}
<div class="span7">
  <h2> {% trans "Inspect data for " %} "{{ layer_name }}" </h2>

  <form method="POST" id="timeForm" role="form" class="form-horizontal">

        {% csrf_token %}

        <div class="row">
          <div class="col-md-12">
            <div class="well inline-headers">
              <h4>{% trans "Configure as Time-Series" %}</h4>
              <input type="checkbox" id="time-series-toggle-choice" data-toggle="toggle">
              <span class="help-tip">
                  <p>{% blocktrans %}Toggling this selector allows you to configure (or not) this data as a time series; in this case you will also have to select an attribute
                      to drive the time dimension.
                      <br><br>
                      If GeoNode is not able to parse any of the values for the selected attribute red markers will appear to highlight the problems.
                      <br><br>
                      More information is provided at the bottom of the page in the "Additional Help" sections.
                      {% endblocktrans %}</p>
              </span>
            </div>
          </div>
        </div>

        <div class="form-group" style="padding-left: 45px;display: none;">
            <!-- div class="radio" title="Map animations will not be enabled" -->
                <input type="radio" name="timetype" checked="checked" id="notime">
                <label for="notime">{% trans "No" %}</label>
            <!-- /div -->
            {% if time_form.time_attribute %}
            <!-- div class="radio" title="{% trans "Use an existing timestamp attribute in the data" %}" -->
                <input type="radio" name="timetype" id="existing">
                <label for="existing">{% trans "Yes: with an existing Time-Attribute" %}</label>
            <!-- /div -->
            {% elif time_form.text_attribute %}
            <!-- div class="radio" title="Convert text in the data to a timestamp using standard date/time representation or a custom format" -->
                <input type="radio" name="timetype" id="textattribute">
                <label for="textattribute">{% trans "Yes: by converting data to a timestamp using standard date/time representation" %}</label>
            <!-- /div -->
            {% elif time_form.year_attribute %}
            <!-- div class="radio" title="{% trans "Convert a number field into a year" %}" -->
                <input type="radio" name="timetype" id="convertnumber">
                <label for="convertnumber">{% trans "Yes: by converting a number as Year" %}</label>
            <!-- /div -->
            {% endif %}
        </div>
            {% if time_form.time_attribute or time_form.text_attribute or time_form.year_attribute %}
            <div class="form-group" style="padding-left: 45px;">
                <div class="radio" title="{% trans "Convert data to a timestamp using standard date/time representation or a custom format" %}">
                    <table id="bootstrap-text-att-table"
                           data-toggle="table"
                           data-toolbar="#toolbar"
                           data-pagination="true"
                           data-side-pagination="client"
                           data-page-list="[5, 10, 20, 50, 100, 200]"
                           data-search="true"
                           data-height="500"
                           data-classes="table table-hover table-condensed"
                           data-striped="true"
                           data-hover="true"
                           data-click-to-select="true"
                           data-single-select="true"
                           data-sort-order="asc"
                           data-show-export="false"
                           data-show-refresh="true"
                           data-show-toggle="false"
                           data-show-columns="false">
                        <thead>
                        <tr>
                            {% for att in layer_attributes %}
                                {% if att in time_form.time_names %}
                                    <th data-field="{{ att }}" data-sortable="false" data-formatter="iso8601DateFormatter" >
                                        <div class="radio" title="{{ att|camelize }}">
                                            <input type="radio" name="time_attribute" id="id_time_attribute_{{ forloop.counter }}" value="{{ att }}" style="margin: 0; margin-top:5px;">
                                            <label for="id_time_attribute_{{ forloop.counter }}"><strong>{{ att|camelize }}</strong></label>
                                        </div>
                                    </th>
                                {% elif att in time_form.text_names %}
                                    <th data-field="{{ att }}" data-sortable="false" data-formatter="iso8601Formatter" >
                                        <div class="radio" title="{{ att|camelize }}">
                                            <input type="radio" name="text_attribute" id="id_text_attribute_{{ forloop.counter }}" value="{{ att }}" style="margin: 0; margin-top:5px;">
                                            <label for="id_text_attribute_{{ forloop.counter }}"><strong>{{ att|camelize }}</strong></label>
                                        </div>
                                    </th>
                                {% elif att in time_form.year_names %}
                                    <th data-field="{{ att }}" data-sortable="false" data-formatter="iso8601Formatter" >
                                        <div class="radio" title="{{ att|camelize }}">
                                            <input type="radio" name="year_attribute" id="id_year_attribute_{{ forloop.counter }}" value="{{ att }}" style="margin: 0; margin-top:5px;">
                                            <label for="id_year_attribute_{{ forloop.counter }}"><strong>{{ att|camelize }}</strong></label>
                                        </div>
                                    </th>
                                {% else %}
                                    <th data-field="{{ att }}" data-sortable="true">{{ att|camelize }}</th>
                                {% endif %}
                            {% endfor %}
                            <!-- th data-field="action" data-formatter="actionFormatter" data-events="actionEvents">Action</th -->
                        </tr>
                        </thead>
                    </table>
                </div>
            </div>
            {% endif %}

            <a href="{% url "layer_upload" %}" class="btn btn-primary pull-left">{% trans "Cancel" %}</a> &nbsp;
            <button id='next' class="btn btn-default button-tip" type="submit" value="{% trans 'Next' %}"> Next
                <i id="next-spinner" class="fa fa-spinner fa-spin hide"></i>
                <p id="next-tooltip" style="height: 150px;">{% trans "Start Importer" %}</p>
            </button>
            <div id="upload-status"></div>

        <div class="panel-group" id="accordion">
            <div class="faqHeader"><h5>{% trans "Advanced Options" %}</h5></div>

            <div class="panel panel-default">
                {% if time_form.text_attribute %}
                <div class="panel-heading">
                    <h4 class="panel-title" style="font-size:16px">
                        <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse_id_date_format">{% trans "Date Format" %}</a>
                    </h4>
                </div>
                <div id="collapse_id_date_format" class="panel-collapse collapse">
                    <div class="panel-body formSection left">
                        <div class="form-group" style="padding-left: 45px;">
                            <label for="format_select">{% trans "Text Attribute Date Format" %}  :</label>
                            {{ time_form.text_attribute_format }}
                            <select id="format_select">
                                <option selected="true" value="0">{% trans "Best Guess" %}</option>
                                <option value="1">{% trans "Custom" %}</option>
                            </select>
                        </div>
                    </div>
                </div>
                {% endif %}

                <div class="panel-heading">
                    <h4 class="panel-title" style="font-size:16px">
                        <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse_id_end_time">{% trans "Optional End-Time attribute" %}</a>
                    </h4>
                </div>
                <div id="collapse_id_end_time" class="panel-collapse collapse">
                    <div class="panel-body formSection left">
                        {% if time_form.time_attribute %}
                        <div class="form-group" style="padding-left: 45px;">
                            <div class="radio" title="{% trans "Use an existing timestamp attribute in the data" %}">
                                <input type="radio" name="end_timetype" id="end_existing">
                                <label for="end_existing">{% trans "Existing Time Attribute" %}  :</label>{{ time_form.end_time_attribute }}
                            </div>
                        </div>
                        {% endif %}
                        {% if time_form.text_attribute %}
                        <div class="form-group" style="padding-left: 45px;">
                            <div class="radio" title="Convert text in the data to a timestamp using standard date/time representation or a custom format">
                                <input type="radio" name="end_timetype" id="end_textattribute">
                                <label for="end_textattribute">{% trans "Convert Text Attribute" %}  :</label>{{ time_form.end_text_attribute }}
                                <br/>
                                <label for="end_format_select">{% trans "Date Format" %}  :</label>
                                {{ time_form.end_text_attribute_format }}
                                <select id="end_format_select">
                                    <option selected="true" value="0">{% trans "Best Guess" %}</option>
                                    <option value="1">{% trans "Custom" %}</option>
                                </select>
                            </div>
                        </div>
                        {% endif %}
                        {% if time_form.year_attribute %}
                        <div class="form-group" style="padding-left: 45px;">
                            <div class="radio" title="{% trans "Convert a number field into a year" %}">
                                <input type="radio" name="end_timetype" id="end_convertnumber">
                                <label for="end_convertnumber">{% trans "Convert Number (As Year)" %}  :</label>{{ time_form.end_year_attribute }}
                            </div>
                        </div>
                        {% endif %}
                    </div>
                </div>

                <div class="panel-heading">
                    <h4 class="panel-title" style="font-size:16px">
                        <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse_id_presentation">{% trans "Time attribute Presentation" %}</a>
                    </h4>
                </div>
                <div id="collapse_id_presentation" class="panel-collapse collapse">
                    <div id="presentation" class="panel-body formSection left">
                        <div class="form-group" style="padding-left: 45px;">
                            <div class="radio">
                                <input id="LIST" type='radio' value='LIST' checked='checked' name='presentation_strategy'/>
                                <label for="LIST"><strong>{% trans "List" %}</strong> {% trans "of all the distinct time values" %}</label>
                            </div>
                            <div class="radio">
                                <input id="DISCRETE_INTERVAL" type='radio' value='DISCRETE_INTERVAL' name='presentation_strategy'/>
                                <label for="DISCRETE_INTERVAL"><strong>{% trans "Intervals" %}</strong> {% trans "defined by the resolution" %}</label>
                            </div>
                            <div class="radio">
                                <input id="CONTINUOUS_INTERVAL" type='radio' value='CONTINUOUS_INTERVAL' name='presentation_strategy'/>
                                <label for="CONTINUOUS_INTERVAL"><strong>{% trans "Continuous Intervals" %}</strong> {% trans "for data that is frequently updated, resolution describes the frequency of updates" %}</label>
                            </div>
                        </div>

                        <div class="form-group" style="padding-left: 45px;">
                            <div id="precision" style="display:none">
                                <p><strong>{% trans "Resolution of time attribute" %}</strong>: <input type="text" name="precision_value" size="3"/>
                                {{ time_form.precision_step }}
                                </p>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="panel-heading">
                    <h4 class="panel-title" style="font-size:16px">
                        <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse_id_help">{% trans "Additional Help" %}</a>
                    </h4>
                </div>
                <div id="collapse_id_help" class="panel-collapse collapse">
                    <div id="timehelp" class="panel-body">
                        <h4>{% trans "Enabling Time" %}</h4>
                        <p>{% blocktrans %}A layer can support one or two time attributes. If a single
                        attribute is used, the layer is considered to contain data that is valid at single points in time. If two
                        attributes are used, the second attribute represents the end of a valid period  hence the layer is considered
                        to contain data that is valid at certain periods in time.{% endblocktrans %}</p>
                        <h4>{% trans "Selecting an Attribute" %}</h4>
                        <p>{% trans "A time attribute can be" %}:</p>
                        <ul>
                            <li>{% trans "An existing date" %}</li>
                            <li>{% trans "Text that can be converted to a timestamp" %}</li>
                            <li>{% trans "A number representing a year" %}</li>
                        </ul>
                        <p>
                        {% blocktrans %}
                        For text attributes, one can specify a custom format (as part of the "Advanced Options") or use the 'best guess' approach which will try to
                        automatically translate well-known recognized patterns into valid times.
                        {% endblocktrans %}
                        </p>
                        {% trans "The 'best guess' will handle date and optional time variants of" %} <a href="http://en.wikipedia.org/wiki/ISO_8601">ISO-8601</a>.
                        {% trans "In terms of the formatting flags noted above, these are" %}:
                        <pre>
    yyyy-MM-dd'T'HH:mm:ss.SSS'Z' --> 2017-12-05T12:00:30.001Z
    yyyy-MM-dd'T'HH:mm:sss'Z' --> 2017-12-05T12:00:030Z
    yyyy-MM-dd'T'HH:mm:ss'Z' --> 2017-12-05T12:00:30Z
    yyyy-MM-dd'T'HH:mm'Z' --> 2017-12-05T12:00Z
    yyyy-MM-dd'T'HH'Z' --> 2017-12-05T12Z
    yyyy-MM-dd --> 2017-12-05
    yyyy-MM --> 2017-12
    yyyy --> 2017
                        </pre>
                    </div>
                </div>

            </div>
        </div>
  </form>
</div>

<!-- Modal -->
<div id="timeMsgBoxModalWarning" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content panel-warning">
      <div class="modal-header panel-heading">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">{% trans "Modal Header" %}</h4>
      </div>
      <div class="modal-body">
        <p>{% trans "Some text in the modal" %}.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">{% trans "Close" %}</button>
      </div>
    </div>

  </div>
</div>

<div id="timeMsgBoxModalOK" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content panel-success">
      <div class="modal-header panel-heading">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">{% trans "Modal Header" %}</h4>
      </div>
      <div class="modal-body">
        <p>{% trans "Some text in the modal" %}.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">{% trans "Close" %}</button>
      </div>
    </div>

  </div>
</div>

{% endblock %}

{% block extra_script %}
{{ block.super }}
    <script data-main="{% static 'geonode/js/upload/time.js' %}"
      src="{% static 'lib/js/require.js' %}">
    </script>

    <script type="text/javascript">
        {% autoescape off %}
        {% if async_upload %}
        //enableUploadProgress('timeForm');
        {% endif %}
        {% endautoescape %}
    </script>

    <script type="text/javascript">
        {% autoescape off %}
        /* ******
            /(^\d{4}$)|(\d{4}-[01]\d)|(\d{4}-[01]\d-[0-3]\d)|(\d{4}-[01]\d-[0-3]\dT[0-2]\d:[0-5]\d:[0-5]\d\.\dZ+)|(\d{4}-[01]\d-[0-3]\dT[0-2]\d:[0-5]\d:[0-5]\dZ)|(\d{4}-[01]\d-[0-3]\dT[0-2]\d:[0-5]\dZ)|(\d{4}\/[01]\d\/[0-3]\d)/
            /(^\d{4}$)|(\d{4}-[01]\d-[0-3]\dT[0-2]\d:[0-5]\d:[0-5]\d\.\dZ+)|(\d{4}-[01]\d-[0-3]\dT[0-2]\d:[0-5]\d:[0-5]\dZ)|(\d{4}-[01]\d-[0-3]\dT[0-2]\d:[0-5]\dZ)|(\d{4}\/[01]\d\/[0-3]\d)/
        ******* */
        var ISO_time_regex = /(^\d{4}$)|(^\d{4}\/\d{2}$)|(^\d{4}\/\d{2}\/\d{2}$)|(\d{4}-[01]\d)|(\d{4}-[01]\d-[0-3]\d)|(\d{4}-[01]\d-[0-3]\dT[0-2]\d:[0-5]\d:[0-5]\d\.\dZ+)|(\d{4}-[01]\d-[0-3]\dT[0-2]\d:[0-5]\d:[0-5]\dZ)|(\d{4}-[01]\d-[0-3]\dT[0-2]\d:[0-5]\dZ)/;
        var data_validation = false;
        var data_is_valid = {};

        function iso8601DateFormatter(value, row, index) {
            var time_checked_value = String(value);
            if(data_validation && !time_checked_value.match(ISO_time_regex)) {
                time_checked_value = '<font color="red" title="' + value +'{% trans " does NOT match any valid ISO-8601 Date-Time string!" %}">' +
                    '<i class="fa fa-exclamation-triangle" aria-hidden="true"></i>&nbsp;' + value +'</font>';
                try {
                    if(!data_is_valid.hasOwnProperty($(this)[0].field)){
                        data_is_valid[$(this)[0].field] = false;
                    }
                } catch(err) {
                    // console.log(err);
                }
             }
            return time_checked_value;
        }

        function iso8601Formatter(value, row, index) {
            var time_checked_value = String(value);
            if(data_validation && !time_checked_value.match(ISO_time_regex)) {
                time_checked_value = '<font color="red" title="' + value +'{% trans " does NOT match any valid ISO-8601 Date-Time string!" %}">' +
                    '<i class="fa fa-exclamation-triangle" aria-hidden="true"></i>&nbsp;' + value +'</font>';
                try {
                    if(!data_is_valid.hasOwnProperty($(this)[0].field)){
                        data_is_valid[$(this)[0].field] = false;
                    }
                } catch(err) {
                    // console.log(err);
                }
             }
            return time_checked_value;
        }

        function actionFormatter(value, row, index) {
            return [
                /*'<a class="like" href="javascript:void(0)" title="Like">',
                '<i class="glyphicon glyphicon-heart"></i>',
                '</a>',*/
                '<a class="edit ml10" href="javascript:void(0)" title="Edit">',
                '<i class="glyphicon glyphicon-edit"></i>',
                '</a>'/*,
                '<a class="remove ml10" href="javascript:void(0)" title="Remove">',
                '<i class="glyphicon glyphicon-remove"></i>',
                '</a>'*/
            ].join('');
        }

        window.actionEvents = {
            /*'click .like': function (e, value, row, index) {
                alert('You click like icon, row: ' + JSON.stringify(row));
                console.log(value, row, index);
            },*/
            'click .edit': function (e, value, row, index) {
                var time_attribute = '';
                $('input[id="id_text_attribute"]').each(function(index) {
                    if($('input[id="id_text_attribute"]')[index].checked) {
                        time_attribute = $('input[id="id_text_attribute"]')[index].value;
                    }
                });
                if (time_attribute) {
                    /********************************************
                    **    No time-zone varients:
                    **
                        //-- Complete precision:
                        /\d{4}-[01]\d-[0-3]\dT[0-2]\d:[0-5]\d:[0-5]\d\.\d+/

                        //-- No milliseconds:
                        /\d{4}-[01]\d-[0-3]\dT[0-2]\d:[0-5]\d:[0-5]\d/

                        //-- No Seconds:
                        /\d{4}-[01]\d-[0-3]\dT[0-2]\d:[0-5]\d/

                        //-- Putting it all together:
                        /(\d{4}-[01]\d-[0-3]\dT[0-2]\d:[0-5]\d:[0-5]\d\.\d+)|(\d{4}-[01]\d-[0-3]\dT[0-2]\d:[0-5]\d:[0-5]\d)|(\d{4}-[01]\d-[0-3]\dT[0-2]\d:[0-5]\d)/
                    **/
                    var time_value = String(row[time_attribute]);
                    if(time_value.match(ISO_time_regex)) {
                        $("#timeMsgBoxModalOK").find('.modal-title').text('{% trans "Valid ISO-8601 for" %} "' + time_attribute + '"');
                        $("#timeMsgBoxModalOK").find('.modal-body').text(time_value + ' {% trans "matches a valid ISO-8601 Date-Time string!" %}');
                        $("#timeMsgBoxModalOK").modal("show");
                    } else {
                        $("#timeMsgBoxModalWarning").find('.modal-title').text('{% trans "Not Valid ISO-8601 for" %} "' + time_attribute + '"');
                        $("#timeMsgBoxModalWarning").find('.modal-body').text(time_value + ' {% trans "does NOT match any valid ISO-8601 Date-Time string!" %}');
                        $("#timeMsgBoxModalWarning").modal("show");
                    }
                } else {
                    $("#timeMsgBoxModalWarning").find('.modal-title').text('{% trans "Wrong Selection" %}');
                    $("#timeMsgBoxModalWarning").find('.modal-body').text('{% trans "Please, select one Time Attribute to test!" %}');
                    $("#timeMsgBoxModalWarning").modal("show");
                }
            }/*,
            'click .remove': function (e, value, row, index) {
                alert('You click remove icon, row: ' + JSON.stringify(row));
                console.log(value, row, index);
            }*/
        };

        $(function () {
            var data = {{ layer_values }};
            // $('#bootstrap-table').bootstrapTable('load', data);
            $('#bootstrap-text-att-table').bootstrapTable('load', data);
        });
        {% endautoescape %}
    </script>
{% endblock %}
